import './Mars3dSetUp.scss'
import { v4 } from 'uuid'
import { Button } from 'antd'
import { useState } from 'react'
import { useMount } from 'ahooks'
import PropTypes from 'prop-types'

import { optionsList, elementMapping } from '../../Assets/Params'
import { UseConfigSection } from '../../Template/FormTemplate'
import { useRequest } from 'alova'
import { Http } from '../../Api'
import { CommonSceneUrl } from '../../Config/urlList'

const Mars3dAddBIM = ({ data, ModalEvent, Off }) => {
    Mars3dAddBIM.propTypes = { data: PropTypes.object, ModalEvent: PropTypes.object, Off: PropTypes.func }

    const [Uuid, setUuid] = useState()
    const [List, setList] = useState()
    const [Data, setData] = useState()

    const { send } = useRequest(params => Http({ url: 'getFileNameByPathAndContent', params }), { immediate: false })


    useMount(() => {
        const uuid = v4()
        const { obj, gro } = data
        const sel = Object.keys(gro).map(key => gro[key]).sort((a, b) => a.sort - b.sort).map(item => ({ label: item.label, value: item.key }))
        obj[uuid] = { isCenter: 2, isEnable: true, uuid, type: 'tileset' }
        setData(obj)
        send({ FilePath: 'Scene/tiles', PathType: 1 }).then(res => {
            const options = res.map(({ fileName, fileType }) => {
                if (fileType === '文件夹') return { label: fileName, value: CommonSceneUrl.tiles + fileName + '/tileset.json' }
            }).filter(item => item !== undefined)
            setUuid(uuid)
            setList([
                { key: 101, uuid, label: '模型名称', type: 'InputTemp', name: 'title' },
                { key: 102, uuid, label: '模型排序', type: 'InputNumberTemp', name: 'sortId' },
                { key: 103, uuid, label: '模型分组分组', type: 'SelectTemp', name: 'groKey', options: sel },
                { key: 104, uuid, label: '是否启用', type: 'RadioTemp', name: 'isEnable', options: optionsList.isEnable },
                { key: 105, uuid, label: '模型路径', type: 'SelectTemp', name: 'url', options },
                { key: 106, uuid, label: '加载视角', type: 'RadioTemp', name: 'isCenter', options: optionsList.isCenter },
            ])
        })
    })

    const onSubmit = () => {
        const key = Data[Uuid].groKey
        delete Data[Uuid].groKey
        Data[Uuid] = { ...Data[Uuid], ...elementMapping[Data[Uuid].type].defaultData }
        ModalEvent.emit({ type: 'addTileset', data: { data: Data, uuid: Uuid, key } })
        Off()
    }

    const onClose = () => {
        Off()
        // delete data[Uuid]
    }

    return (
        <div className='Mars3dSetUp Mars3dAddEle'>
            <div className='FormList'>
                {Uuid && List && UseConfigSection(Data, List)}
            </div>
            <div className='Button'>
                <Button type='primary' danger onClick={onClose}>取消</Button>
                <Button type='primary' onClick={onSubmit}>保存</Button>
            </div>
        </div>
    )
}

export default Mars3dAddBIM